<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text-html; charset=utf-8">
<link type="text/css" href="css/cupertino/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
<script type="text/javascript">
var bg = chrome.extension.getBackgroundPage();
function getSliderLabel(val){
	if(Math.round(val) != val){
		if(val == 0.5) {
			return "每30秒"
		} else {
			return "每" + (Math.round(val) - 1) + "分" +　"30秒"
		}
	} else {
		return "每" +val + "分钟"
	}
}
function textarea_change(){
	$('#wordcount').text(140 - $(this).val().length);
}
function slide_func(event,ui){
	$('#slider_val').val(getSliderLabel(ui.value));
	bg.setQueryInterval(ui.value);
}
function getRightIcon(flag){
	if(flag) {
		return 'ui-icon-check';
	}else {
		return 'ui-icon-close';
	}
}
$(function()
    {
	if (bg.oauth.hasToken()) {
	console.log("authorized");
	// authorized
	$('#login_btn').hide();
	$('#submit_wb').button();
	$('#user_img').attr('src',localStorage.getItem('tc_imageurl'));
	$('#user_name').html('<a href="http://t.sina.com.cn/' + localStorage.getItem('tc_uid') + '" >'
		+ localStorage.getItem('tc_screenname') + '</a>');
	$('#user_desc').text(localStorage.getItem('tc_desc'));
	$('#slider').slider({	min:0.5,
				max:30,
				value: localStorage.getItem('query_interval_in_mins'),
				step: 0.5,
				 slide: slide_func
				});
	$('#slider_val').val(getSliderLabel(localStorage.getItem('query_interval_in_mins')));
	$('#ck_comments').button( {icons: {
                primary: getRightIcon(eval(localStorage.getItem('tc_comment_flag')))
		}});
	$('#ck_followers').button({icons: {
                primary: getRightIcon(eval(localStorage.getItem('tc_follower_flag')))
		}});
	$('#ck_mentions').button({icons: {
                primary: getRightIcon(eval(localStorage.getItem('tc_mention_flag')))
		}});
	$('#ck_dms').button({icons: {
                primary: getRightIcon(eval(localStorage.getItem('tc_dm_flag')))
		}});
	$('#setting').hide();
	$('#wbt').bind('keyup', textarea_change);
	}else {
		$('#setting_label').hide();
		$('#weibo').hide();
		$('#logout').hide();
		$('#slider_all').hide();
		$('#chooser').hide();
		$('#user_info').hide();
		$('#login_btn').button({ 
				label: "登录微博",
				disabled: false });	
	}
    });
function login(){
	bg.doAuthorize();
	window.location=window.location;
	//window.close();
}

function logout(){
	bg.doLogout();
	window.location=window.location;
	//window.close();
}

function toggle_setting() {
	if ($('#setting').is(":visible")){
		$('#setting').slideUp();
		$('#setting_label').text('简单设置一下 >');
	} else {
		$('#setting').slideDown();
		$('#setting_label').text('关闭设置 <');
	}
}

function click_comments(){
	var cv = eval(localStorage.getItem('tc_comment_flag'));
	$("#ck_comments").button( "option", "icons", {primary:getRightIcon(!cv)} );
	$("#ck_comments").attr("checked", !cv);
	localStorage.setItem('tc_comment_flag',!cv);
}
function click_followers(){
	var cv = eval(localStorage.getItem('tc_follower_flag'));
	$("#ck_followers").button( "option", "icons", {primary:getRightIcon(!cv)} );
	$("#ck_followers").attr("checked", !cv);
	localStorage.setItem('tc_follower_flag',!cv);
}
function click_mentions(){
	var cv = eval(localStorage.getItem('tc_mention_flag'));
	$("#ck_mentions").button( "option", "icons", {primary:getRightIcon(!cv)} );
	$("#ck_mentions").attr("checked", !cv);
	localStorage.setItem('tc_mention_flag',!cv);
}
function click_dms(){
	var cv = eval(localStorage.getItem('tc_dm_flag'));
	$("#ck_dms").button( "option", "icons", {primary:getRightIcon(!cv)} );
	$("#ck_dms").attr("checked", !cv);
	localStorage.setItem('tc_dm_flag',!cv);
}

function submit_weibo() {
	var update_api = "http://api.t.sina.com.cn/statuses/update.json";
	var weibo = $('#wbt').val();
	var request =  {
					'method' : 'POST',
					'parameters':{
						'status' : encodeURIComponent(weibo)
					}};

	$('#wordcount').text('发送中..');
	$('#wbt').attr('disabled', true);
	
	function reset() {
		$('#wbt').attr('disabled', false);
		$('#wbt').text('');
		$('#wordcount').text('140');
	}
	
	bg.sendRequest(update_api, function(rsp,xhr){
						if (xhr.status == 200) {
							$('#wordcount').text('发送成功！');
							setTimeout(reset,500);
						}
					}, request);

}
</script>
<style type="text/css">
body{ 	
    font-family: "Microsoft YaHei" ! important;
    font-size: 67.5% ;  
	background: -webkit-gradient(
		linear,
        left top, 
		left bottom, 
		from(#DDF3F7), 
		to(#FFFFFF));
	}
#logout {
	margin-left: 140px;
}
#logout a:hover {	color: #ffffff;background-color:#7ad0f2;}
#setting_label:hover {
	color: #FFFFFF;
	background-color:#7ad0f2;
}
//#login_btn {position: relative;margin-left:20%;margin-right:20%;}
#user_name {
	position: relative;
	font-weight: bolder;
	text-shadow: 0px 0px 1px #111;
	padding-bottom: 0px;
	}
#user_desc {
	padding-top: 0px;
}
#setting_label { font-size: 30%}
#user_img {
	float:left;
	margin-right:10px;
	-webkit-box-shadow: 5px 5px 7px #999
}
#submit_wb {
	
}
#wbt {
	border: 0px;
	width: 160px;
}
#weibo {
	clear: both;
	margin-top: 22px;
}
#wordcount {
	float: left;
	font-style:italic;
}
#btdiv {
	float: right;
	width: 60px;
}
</style>	
</head>
<body>

<div id='logout'><a href='javascript:logout();'>注销</a></div>
<!-- <div id='icon' style="margin-bottom:5px"><image src='sina2.png'/></div> -->
<input type='button' id="login_btn" onclick="javascript:login()"/>
<div id='user_info'>
	<br>
	<div id='img_div'><image id='user_img'  src="" /></div>
	<div id='user_name'></div>
	<div id='user_desc'></div>
</div>

<div id='weibo'>
<label for='wbt'>发新微博：</label>
<textarea id='wbt'> </textarea>
<div>
<div id='wordcount'>140</div>
<div id='btdiv'><button id='submit_wb' onclick="submit_weibo();">发送</button></div>
<div style="clear : both"> </div>
</div>
</div>
<br>
<a id='setting_label' href='javascript:toggle_setting();'>简单设置一下 ></a>
<div id='setting'>
	<div id='chooser'>
		<p>查询我的:</p>
		<button id="ck_comments" onclick="click_comments()" style="position:relative;width:100%">新评论</button> 
		<button id="ck_followers" onclick="click_followers()" style="position:relative;width:100%">新粉丝</button> 
		<button id="ck_mentions" onclick="click_mentions()" style="position:relative;width:100%">新@我</button> 
		<button id="ck_dms" onclick="click_dms()" style="position:relative;width:100%">新私信</button> 
	</div>
	<div id="slider_all">查询间隔:</label>
		<input type="text" id="slider_val" style="border:0; color:#f6931f; font-weight:bold;background-color:transparent;" />
		<div id="slider"></div>
	</div>
</div>

</body>
</html>
